<template>
	<view class="indentDemand-mod">
		<view class="Demand-mod-text">
			<view class="width">
				<textarea type="text" class="" placeholder="请输入您的服务需求" :value="value"
					@input="inputClick($event.target.value)" maxlength="50" />
			</view>
			<view class="Demand-mod-nums">
				<text class="gray" v-if="value==''">{{len}}</text>
				<text class="gray" v-else>{{len}}</text>
				/50
			</view>
			<view class="fz" v-if="flag">
				最多50个字哦
			</view>
		</view>
		<view class="btn-mod center" @click="overClick">
			完成
		</view>
	</view>
</template>

<script>
	export default {
		name: "indentDemand",
		onLoad(obj) {
			if (obj !== null) {
				this.id = Number(obj.id)
				uni.setNavigationBarTitle({
					title: obj.title
				})
			}
		},
		data() {
			return {
				id: 0,
				value: '',
				len: 0,
				flag:false
			}
		},
		methods: {
			inputClick(val) {
				this.len = val.length
				if (val.length == 50) {
					this.flag = true
				} else {
					this.value = val
					this.flag= false
				}
			},
			overClick(){
				uni.navigateTo({
					url: '/pages/indent/indent?title=确认订单&id=' + this.id+'&value='+this.value
				})
			}
		}
	}
</script>

<style lang="scss">
	.indentDemand-mod {
		position: relative;
		padding: 40rpx 20rpx 20rpx;

		.Demand-mod-text {
			position: relative;

			.width {
				height: 180rpx;
				background-color: #F2f2f2;
				border-radius: 8px;
				padding: 20rpx;

				textarea {
					font-size: 25rpx;
					letter-spacing: 3rpx;
					height: 100%;
					width: 100%;
				}
			}
		}

		.Demand-mod-nums {
			position: absolute;
			right: 15rpx;
			bottom: 15rpx;
			font-size: 28rpx;
		}
		
		.fz {
			position: absolute;
			left: 38%;
			bottom: -160rpx;
			color: #fff;
			background-color: #666;
			padding: 8rpx;
			border-radius: 8rpx;
			opacity: 0;
			animation: carousel 1s linear;
		}

		.btn-mod {
			width: 90%;
			position: fixed;
			bottom: 0;
			border-radius: 3px;
		}
	}
	@keyframes carousel {
		to {
			opacity: 1;
		}
	}
</style>
